<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div style="position: absolute;left:0;top: 0;display: flex;width: 100%;height: 100%">
	<ul style="width: 20%;">
		<li id="ceshi1" style="border: 1px solid #f00000; margin: 20px;cursor: move;user-select: none">
			<p>
				<span>测试控件1</span>
			</p>
		</li>
		<li id="ceshi2" style="border: 1px solid #f00000; margin: 20px;cursor: move;user-select: none;">测试控件2</li>
	</ul>
	<div id="plant" style="width: 80%;height: 100%">

	</div>
</div>
<script>
	const plant = new window.Plant.BasePlantStruct({id: 'plant',element: document.getElementById('plant'), isStop: true})
	window.plant = plant;

	const App = {
		template: '<div style="min-height: 50px;border: 1px solid pink;"></div>',
		name: 'app'
	}

	const AppFn = Vue.extend(App);
	let a = 1;
	const initDataTest = function () {
		const instance = new AppFn().$mount();
		a++;
		return {
			element: instance.$el,
			id: `mytest${a}`,
			type: 'test',
			display: 'test'
		}
	}

	const drop1 = new window.RevalList.BaseRevealList({
		id: 'ceshi1',
		element: document.getElementById('ceshi1'),
		revealType: 0,
		initData: initDataTest
	})

	let b = 1;

	const initDataTest1 = function () {
		const App1 = {
			template: `<div style="line-height: 50px">第${b}个小控件</div>`,
			name: 'app'
		}
		const AppFn1 = Vue.extend(App1);
		const instance = new AppFn1().$mount();
		b++;
		return {
			element: instance.$el,
			id: `mytestaaa${b}`,
			type: 'test',
			display: 'test'
		}
	}
	const drop2 = new window.RevalList.BaseRevealList({
		id: 'ceshi2',
		element: document.getElementById('ceshi2'),
		revealType: 1,
		initData: initDataTest1
	})
</script>
</body>
</html>
